// 声明/注册一个组件
import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class Home extends Component {
  render() {
    console.log('====================================');
    console.log(this.props);
    console.log('====================================');
    return (
      <div className="container">
        <div className="row">
          <div className="col-xs-1 col-xs-offset-11">
            <h1>HOME</h1>
            <h2 className="text-primary">name : { this.props.pcname }</h2>
            <h3 className="text-danger">age : { this.props.pclmz }</h3>
            <div>
              <h4> { this.props.pf.name }</h4>
              <ul>
                {this.props.pf.friends.map(
                  (item, i) => <li key={i}> {item}</li>
                )}
              </ul>
              <ul>
                {
                  Object.keys(this.props.pf).forEach(key=>
                    console.log(key, this.props.pf[key])
                  )
                }
              </ul>
              <div>
                {this.props.children}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Home.propTypes = {
  pclmz: PropTypes.number,
  pcname: PropTypes.string,
  pf: PropTypes.object,
  children: PropTypes.element.isRequired //pteli
}